<template>
  <div class="sort-mask" @click.self="$parent.isShowSortMask = false">
    <section>
      <header class="title">排序方式</header>
      <div class="list">
        <div
          class="item"
          :class="{ active: active === 0 }"
          @click="changeActive(0)"
        >
          按默认方式排序
        </div>
        <div
          class="item"
          :class="{ active: active === 1 }"
          @click="changeActive(1)"
        >
          按评论数多-少排序
        </div>
        <div
          class="item"
          :class="{ active: active === 2 }"
          @click="changeActive(2)"
        >
          按歌曲名A-Z排序
        </div>
        <div
          class="item"
          :class="{ active: active === 3 }"
          @click="changeActive(3)"
        >
          按歌手名A-Z排序
        </div>
      </div>
      <footer class="title" @click="$parent.isShowSortMask = false">
        取消
      </footer>
    </section>
  </div>
</template>

<script>
export default {
  name: "SortMask",
  data() {
    return {
      active: 0,
    };
  },

  methods: {
    // 切换高亮
    changeActive(index) {
      this.active = index;
      this.$parent.isShowSortMask = false;
    },
  },
};
</script>

<style lang="less" scoped>
.sort-mask {
  width: 100vw;
  height: 100vh;
  background-color: #2928286c;
  position: fixed;
  bottom: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: flex-end;

  section {
    width: 90%;
    height: 260px;
    background-color: #ffffffbd;
    border-radius: 15px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      font-size: 17px;
      text-align: center;
      font-weight: bold;
    }

    .list {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        border-top: 1px solid #707070;

        &.active {
          color: skyblue;
          font-weight: bold;
          transition: all 0.4s;
        }
      }
    }
  }
}
</style>
